<!-- 模板 -->
<template>
  <div class="case-list">
    <!-- 1、导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>案例管理</el-breadcrumb-item>
      <el-breadcrumb-item>案例列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 2、卡片 -->
    <el-card>
      <!-- 2.1 表单 -->
      <el-form :model="pageInfo" ref="caseFormRef" :inline="true">
        <!-- :rules="caseFormRules" -->
        <!-- 案例名称 -->
        <el-form-item label="案例名称" prop="name">
          <el-input
            v-model="pageInfo.name"
            type="text"
            placeholder="输入名称"
            class="name"
            clearable
            @clear="getFirstPageList"
          />
        </el-form-item>
        <!-- 案例房型 -->
        <el-form-item label="房型">
          <el-select
            class="house-type"
            v-model="pageInfo.houseType"
            placeholder="请选择"
            clearable
            @clear="getFirstPageList"
            @change="getFirstPageList()"
          >
            <el-option
              v-for="(item, index) in houseTypeArr"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 风格 -->
        <el-form-item label="风格">
          <el-select
            clearable
            class="fit-type"
            v-model="pageInfo.fitType"
            placeholder="请选择"
            @clear="getFirstPageList"
            @change="getFirstPageList"
          >
            <el-option
              v-for="(item, index) in fitTypeArr"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 面积 -->
        <el-form-item label="面积">
          <el-select
            class="area"
            clearable
            v-model="pageInfo.area"
            placeholder="请选择"
            @clear="getFirstPageList"
            @change="getFirstPageList"
          >
            <el-option
              v-for="(item, index) in areaArr"
              :key="index"
              :label="'≥' + item + 'm²'"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 造价 -->
        <el-form-item label="造价">
          <el-select
            clearable
            class="price"
            v-model="pageInfo.price"
            placeholder="请选择"
            @clear="getFirstPageList"
            @change="getFirstPageList"
          >
            <el-option
              v-for="(item, index) in priceArr"
              :key="index"
              :label="'≥' + item / 10000 + 'w元'"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 操作 -->
        <el-form-item>
          <el-button
            class="search-btn"
            type="primary"
            icon="el-icon-search"
            @click="getFirstPageList"
          >
            搜索
          </el-button>
          <el-button
            class="add-btn"
            @click="$router.push('/addCase')"
            type="primary"
            icon="el-icon-plus"
          >
            添加案例
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 2.2 表格 -->
      <el-table :data="caseList" border :header-cell-style="headerCellStyle">
        <!-- 序号 -->
        <el-table-column label="序号" width="80" type="index" align="center">
        </el-table-column>
        <!-- 案例名称 -->
        <el-table-column
          label="案例名称"
          width="180"
          align="center"
          prop="name"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- 案例图片 -->
        <el-table-column label="案例图片" width="180" align="center">
          <template v-slot="scope">
            <el-tooltip
              class="item"
              effect="dark"
              content="点击图片预览"
              placement="right"
              :enterable="false"
            >
              <img
                v-lazy="scope.row.img"
                alt=""
                style="width: 1rem; height: 1rem; cursor: pointer"
                @click="preView(scope.row.img)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- 房型 -->
        <el-table-column
          label="房型"
          width="80"
          align="center"
          prop="house_type"
        >
        </el-table-column>
        <!-- 风格 -->
        <el-table-column label="风格" width="80" align="center" prop="fit_type">
        </el-table-column>
        <!-- 面积 -->
        <el-table-column
          label="面积/m²"
          sortable
          width="100"
          align="center"
          prop="area"
        >
        </el-table-column>
        <!-- 造价 -->
        <el-table-column
          label="造价/元"
          sortable
          width="100"
          align="center"
          prop="price"
        >
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="$router.push('/updateCase/' + scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              @click="deleteCase(scope.row.id)"
              icon="el-icon-delete"
              size="mini"
            >
              删除
            </el-button></template
          >
        </el-table-column>
      </el-table>
      <!-- 2.3 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.page"
        :page-sizes="[1, 5, 10, 15, 20, 50]"
        :page-size="pageInfo.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 3、图片预览对话框 -->
    <el-dialog
      title="图片预览"
      :visible.sync="preViewDialogVisible"
      width="30%"
    >
      <img :src="preViewSrc" alt="" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script>
import {
  priceArr,
  areaArr,
  fitTypeArr,
  houseTypeArr,
} from '../assets/js/arrays'
import { request } from '../utils/request'
export default {
  name: '',
  data() {
    return {
      preViewDialogVisible: false,
      preViewSrc: '',
      headerCellStyle: {
        backgroundColor: '#409EFF',
        color: '#fff',
      },
      pageInfo: {
        page: 1,
        rows: 5,
        houseType: '',
        fitType: '',
        area: '',
        price: '',
        name: '',
      },
      houseTypeArr,
      fitTypeArr,
      areaArr,
      priceArr,
      caseList: [],
      total: 0,
      totalPage: 0,
    }
  },
  methods: {
    //根据ids删除案例
    async deleteCase(id) {
      let flag = 'cancel'
      try {
        flag = await this.$confirm(
          '此操作将永久删除该文件, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
      } catch (error) {
        console.log(error)
      }
      if (flag !== 'confirm') {
        return this.$message.info('你点击了取消删除id=' + id)
      }
      let options = {
        url: 'caselist/' + id,
        type: 'delete',
      }
      let { data: res } = await request(options)
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      //重新加载最新的数据
      this.getCaseList()
    },
    //查询当前条件下的第一页数据
    getFirstPageList() {
      this.pageInfo.page = 1
      this.getCaseList()
    },
    //预览当前图片
    preView(src) {
      this.preViewSrc = src
      this.preViewDialogVisible = true
    },
    //当页面条数发生变化时的函数
    handleSizeChange(size) {
      this.pageInfo.rows = size
      this.getCaseList()
    },
    //当页码发生变化时触发的函数
    handleCurrentChange(page) {
      this.pageInfo.page = page
      this.getCaseList()
    },
    //请求案例列表数据
    async getCaseList() {
      let options = {
        url: 'caselist',
        type: 'get',
        data: this.pageInfo,
      }
      let { data: res } = await request(options)
      console.log(res)
      //请求失败
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      //请求成功
      this.total = res.data.count
      this.totalPage = Math.ceil(res.data.count / this.pageInfo.rows)
      this.caseList = res.data.rows
    },
  },
  created() {},
  mounted() {
    this.getCaseList()
  },
}
</script>

<style lang="less" scoped>
.name,
.house-type,
.fit-type,
.area,
.price {
  width: 1.2rem;
}
.el-table,
.el-form {
  width: 1133px;
  margin: 0 auto;
}
.el-pagination {
  text-align: center;
  margin-top: 0.1rem;
}
</style>
